import { forwardRef } from 'react'
import cm from 'classnames'
import styles from './index.module.less'
import { debounce } from 'lodash-es'

const Index = (props, ref) => {
  const {
    className,
    children,
    type = '',
    mode = 'button',
    value = '提交',
    loadingText = '处理中...',
    isLoading,
  } = props
  const click = (e) => {
    e.preventDefault()
    props?.onClick?.(e)
  }
  const debounceClick = debounce(click, 300)
  if (mode === 'submit') {
    return <input type="submit" value={value} className={cm(styles['button-component'], className, styles[type])} />
  }
  return (
    <button
      ref={ref}
      className={cm(styles['button-component'], className, styles[type], isLoading ? styles.disable : '')}
      onClick={debounceClick}
    >
      {isLoading ? loadingText : children}
    </button>
  )
}

const MemoIndex = forwardRef(Index)
export default MemoIndex
